<template>
  <div class="home">
    <sy-top :indexUnit="indexUnit" @parentActive="parentActive" />
    <cesium-map
      v-show="showCesium"
      :sceneUrl="sceneUrl"
      ref="cesium"
      @openImg="openImg"
      @showvr="showvrClick"
    />
    <router-view></router-view>
    <people-info v-if="isImg" :imgUrl="imgUrl" @closeImg="closeImg" />
    <div class="krpano" v-if="showVr">
      <div class="close" @click="closeVrClick">x</div>
      <vtour :xmlPath="xml" />
    </div>
  </div>
</template>

<script>
import SyTop from "./syPage/SyTop.vue";
import SyNc from "./syPage/SyNc.vue";
import SyNm from "./syPage/SyNm.vue";
import SyNy from "./syPage/SyNy.vue";
import CesiumMap from "components/common/cesium/CesiumMap.vue";
import PeopleInfo from "components/content/item/PeopleInfo.vue";
import Vtour from "components/content/vtour/Vtour.vue";

import { curUrl3 } from "util/prodUrl";
export default {
  components: {
    SyTop,
    SyNc,
    SyNm,
    SyNy,
    CesiumMap,
    PeopleInfo,
    Vtour,
  },
  data() {
    return {
      active: 0,
      indexUnit: null,
      datas: {},
      showCesium: true,
      sceneUrl:
        "http://123.56.65.68:8090/iserver/services/3D-hhlQxNew/rest/realspace",
      icons: [
        {
          id: 1001,
          name: "1组",
          position: { x: 117.74187, y: 42.42087, z: 1300 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/1/krpano.xml",
        },
        {
          id: 1002,
          name: "2组",
          position: { x: 117.7326062399276, y: 42.43069910106486, z: 1250 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/2/krpano.xml",
        },
        {
          id: 1003,
          name: "3组",
          position: { x: 117.7268856773804, y: 42.43957932907419, z: 1250 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/3/krpano.xml",
        },
        {
          id: 1004,
          name: "4组",
          position: { x: 117.7478364656279, y: 42.47403770960266, z: 1450 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/4/krpano.xml",
        },
        {
          id: 1005,
          name: "5组",
          position: { x: 117.7250439538266, y: 42.44856987814954, z: 1250 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/5/krpano.xml",
        },
        {
          id: 1006,
          name: "6组",
          position: { x: 117.719064128125, y: 42.45096709244352, z: 1250 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/6/krpano.xml",
        },
        {
          id: 1007,
          name: "7组",
          position: { x: 117.6978012737577, y: 42.45698788320112, z: 1300 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/7/krpano.xml",
        },
        {
          id: 1008,
          name: "8组",
          position: { x: 117.7054468386461, y: 42.46661852832335, z: 1300 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/8/krpano.xml",
        },
        {
          id: 1009,
          name: "9组",
          position: { x: 117.6864956404071, y: 42.4659414047978, z: 1450 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/9/krpano.xml",
        },
        {
          id: 10010,
          name: "10组",
          position: { x: 117.6767759596108, y: 42.47114850783513, z: 1500 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/10/krpano.xml",
        },
        {
          id: 10011,
          name: "11组",
          position: { x: 117.6729147112425, y: 42.47621251011676, z: 1550 },
          icon: require("assets/img/map/ico.png"),
          url: curUrl3 + "/pano/ksh/1vr/demo/11/krpano.xml",
        },
        {
          id: 1111111,
          name: "点击",
          position: { x: 117.719064128125, y: 42.45096709244352, z: 1220 },
          icon: require("assets/img/map/ico2.png"),
        },
      ],
      iconsClick: [
        {
          id: 1111111,
          name: "点击",
          position: { x: 117.719064128125, y: 42.45096709244352, z: 10 },
          icon: require("assets/img/map/ico2.png"),
        },
      ],
      isImg: false,
      imgUrl: "",
      showVr: false,
      xml: curUrl3 + "/pano/ksh/1vr/honghulu/1/krpano.xml",
    };
  },
  created() {},
  mounted() {
    this.$refs.cesium.addIcons(this.icons);
    this.$refs.cesium.openScene();
    this.$refs.cesium.addMap1();
  },
  methods: {
    parentActive(main) {
      this.active = main.index;
      this.$router.push("/main/sy" + main.path);
      this.isCesiumMethod();
    },
    isCesiumMethod() {
      if (this.active == 0) {
        this.showCesium = true;
        this.sceneUrl =
          "http://123.56.65.68:8090/iserver/services/3D-hhlQxNew/rest/realspace";
        this.$refs.cesium.addIcons(this.icons);
        this.$refs.cesium.addMap1();
      } else if (this.active == 1) {
        this.showCesium = true;
        this.sceneUrl =
          "http://123.56.65.68:8090/iserver/services/3D-hhlwrite/rest/realspace";
        this.$refs.cesium.addIcons(this.iconsClick);
        this.$refs.cesium.addMap2();
      } else if (this.active == 2) {
        this.showCesium = false;
      }
    },
    closeImg() {
      this.isImg = false;
    },
    openImg() {
      console.log(1);
      this.isImg = true;
      if (this.active == 0) {
        this.imgUrl = require("assets/img/sy/nc-info.png");
      } else {
        this.imgUrl = require("assets/img/sy/nm-info.png");
      }
    },
    showvrClick(id) {
      this.showVr = true;
      //this.xml = xml
      for (const ion of this.icons) {
        if (id == ion.id) {
          this.xml = ion.url
        }
      }
      
    },
    closeVrClick() {
      this.showVr = false;
    },
  },
};
</script>
<style scoped lang="scss">
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  // transform: translateX(20px);
  opacity: 0;
}

.home {
  width: 100%;
  height: 100%;
}

.krpano {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  height: 80vh;
  z-index: 123111;
  .close {
    position: absolute;
    right: 8px;
    top: 5px;
    font-size: 60px;
    z-index: 123;
    line-height: 32px;
    color: #000;
  }
}
</style>